<!--
 * @Author: your name
 * @Date: 2021-08-01 16:44:52
 * @LastEditTime: 2021-08-02 01:54:29
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hrsaas\src\views\dashboard\components\radar.vue
-->
<!--  -->
<template>
  <div ref="myRadar" class="Radar" />
</template>

<script>

// 导入的其他文件 例如：import moduleName from 'modulePath';
import * as echarts from 'echarts'
// 引入echarts主模块
// var echarts = require('echarts/lib/echarts')
// require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
export default {

  name: '',

  // import所引入的组件注册
  components: {

  },

  // 子组件进行数据接收
  props: {

  },

  data() {
    return {

    }
  },

  // 监听属性
  computed: {

  },

  // 监控data中的数据变化
  watch: {

  },

  // 生命周期 - 组件实例刚被创建
  beforeCreate() {

  },
  // 创建完成 访问当前this实例
  created() {

  },
  // 挂载之前
  beforeMount() {

  },
  // 挂载完成 访问DOM元素
  mounted() {
    var myChart = echarts.init(this.$refs.myRadar)
    myChart.setOption({
      title: {
        text: '基础雷达图'
      },
      legend: {
        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
      },
      radar: {
        // shape: 'circle',
        indicator: [
          { name: '销售（Sales）', max: 6500 },
          { name: '管理（Administration）', max: 16000 },
          { name: '信息技术（Information Technology）', max: 30000 },
          { name: '客服（Customer Support）', max: 38000 },
          { name: '研发（Development）', max: 52000 },
          { name: '市场（Marketing）', max: 25000 }
        ]
      },
      series: [{
        name: '预算 vs 开销（Budget vs spending）',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000, 18000],
            name: '预算分配（Allocated Budget）'
          },
          {
            value: [5000, 14000, 28000, 26000, 42000, 21000],
            name: '实际开销（Actual Spending）'
          }
        ]
      }]
    })
  },
  // 更新之前
  beforeUpdate() {

  },
  // 更新之后
  updated() {

  },
  // for keep-alive 缓存功能，组件被激活时调用
  activated() {

  },
  // for keep-alive 组件被移除时调用
  deactivated() {

  },
  // 组件销毁之前调用
  beforeDestroy() {

  },
  // 组件销毁之后调用
  destroyed() {

  },

  // 方法集合
  methods: {

  }
}
</script>
<style lang="scss" scoped>
/* //@import url(); 引入公共css类 */
.Radar{
    width: 600px;
    height: 400px;
}
</style>
